/**
 * 培训大纲-课程要求
 */
<template>
   <vp-main-page @refresh="loadDataList" :custom="false" :zoom="false">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col :span="3">
						<el-form-item prop="bh">
							<template #label><vp-label zh="课程编号" en="Course No."/></template>
							<el-input v-model="searchForm.bh" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col :span="3">
						<el-form-item prop="mc">
							<template #label><vp-label zh="课程名称" en="Course Name"/></template>
							<el-input v-model="searchForm.mc" v-trim clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList"/>
						<vp-btn-reset @click="handleSearchReset"/>
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<div style="display: flex;justify-content: space-between;flex: 1;">
				<vp-btn-add v-if="positionId" v-auth="'trainingOutline.edit'" @click="handleAddCourseRequirement" />
				<el-space wrap class="pr20">
					<div v-for="(jx) in fjjxTags" :key="jx">
						<el-tag :type="searchForm.jx === jx ? '' : 'info'" style="cursor: pointer"  :closable="jx != ''"  @close="handleCloseModel(jx)" @click="handleClickModel(jx)" > {{ jx || '公共'}} </el-tag>
					</div>
					<el-button class="button-new-tag ml-1" size="small" @click="handleAddModel" v-auth="'trainingOutline.edit'">
						{{ '新增机型' }}
					</el-button>
				</el-space>
			</div>
		</template>
		<template #table>
			<vp-table ref="tableRef" :data="tableData" row-key="id" v-loading="loading">
				<el-table-column  type="index" align="center" label="#">
				</el-table-column>
				<el-table-column prop="bh" width="180" show-overflow-tooltip>
					<template #header><vp-label zh="课程编号" en="Course No."/></template>
					<template #default="scope">
						<span>{{ scope.row.bh}}</span>
						<el-text v-if="scope.row.kczt === 98" type="danger">（作废）</el-text>
					</template>
				</el-table-column>
				<el-table-column prop="mc"  min-width="200" show-overflow-tooltip>
					<template #header><vp-label zh="课程名称" en="Course Name"/></template>
					<template #default="scope">
						<span>{{ (scope.row.mcZw || '') + ' ' + (scope.row.mcYw || '') }}</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" width="100">
					<template #header>
						<vp-label-operations/>
					</template>
					<template #default="{ row }">
						<vp-btn-del text v-auth="'trainingOutline.edit'" @click="handleDelCourseRequirement(row)"/>
					</template>
				</el-table-column>
			</vp-table>
		</template>

		<!-- 新增课程要求页面 -->
		<VpCourseMultDialog ref="vpCourseMultDialogRef" @confirm="handleCourseMultConfirmed"></VpCourseMultDialog>
		<!-- 新增机型页面 -->
		<EditFjjx ref="ediFjjxDialogRef" @formSubmited="handleModelConfirmed"></EditFjjx>
	</vp-main-page>
</template>
<script setup lang="ts" name="courseRequirementTab">
import { defineAsyncComponent, onMounted, reactive, ref, watch } from 'vue';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import request from '/@/utils/request';
import { useRouter } from 'vue-router';

	const VpCourseMultDialog = defineAsyncComponent(() => import('/@/components/vp/course/VpCourseMultDialog.vue'));
	const EditFjjx = defineAsyncComponent(() => import('../dialogs/EditFjjx.vue'));

	const props = defineProps({
		positionId: {
			type: String
		},
	});

	// 监听岗位id改变，则刷新页面
	watch(()=> props.positionId, ()=>{
		loadDataList();
		loadModel();
	})

	// 组件挂载后事件
	onMounted(() => {
		loadDataList();
		loadModel();
	})

	const tableData = ref([]);
	const loading = ref(false);
	const fjjxTags = ref([] as any[]);

	const showMore = ref(false);
	const searchForm = reactive({
		bh: "",
		mc: "",
		jx: "",
	});

	// 加载列表数据
	const loadDataList = () => {
		loading.value = true;
		request.get('/training/position/courseRequirement/list', {
			params: {
				...searchForm,
				mainid: props.positionId,
			}
		}).then(res => {
			tableData.value = res?.data || [];
		}).finally(()=>{
			loading.value = false;
		})	
	}

	// 加载课程要求机型
	const loadModel = () =>{
		request.post('/training/position/model/list', {
			...searchForm,
			gwId: props.positionId,
		}).then(res => {
			fjjxTags.value = [""].concat(res?.data || []);
		})
	}

	const searchFormRef = ref();

	// 重置搜索条件
	const handleSearchReset = ()=>{
		searchFormRef.value.resetFields();
	}

	// 新增课程要求
	const vpCourseMultDialogRef = ref();
	const handleAddCourseRequirement = () => {
		vpCourseMultDialogRef.value.handleOpen({
			excludePositionId: props.positionId
		});
	}

	// 保存课程要求
	const handleCourseMultConfirmed = (data: any)=>{
		request.post("/training/position/courseRequirement/save",{
			id: props.positionId,
			courses: data,
			jx: searchForm.jx || null
		}).then(()=>{
			loadDataList();
		}).catch(()=>{
		}).finally(()=>{
		})
	}

	// 删除课程要求
	const handleDelCourseRequirement = (row: any) => {
		VpMessageBox.confirmDelete().then(()=>{
			request.delete(`/training/position/courseRequirement/${row.id}`).then(res => {
				loadDataList();
			})
		});
	}

	// 查看课程
	const router = useRouter();
	const handleViewCourse = (id: string)=>{
		router.push({
			name: "viewTrainingCourse",
			params: {
				id: id,
			},
		})
	}

	// 新增机型
	const ediFjjxDialogRef = ref();
	const handleAddModel = () =>{
		ediFjjxDialogRef.value.handleOpen();
	}

	// 点击机型
	const handleClickModel = (obj:any) =>{
		searchForm.jx = obj;
		loadDataList();
	}

	// 删除机型
	const handleCloseModel = (obj:any) =>{
		VpMessageBox.confirmDelete().then(()=>{
			request.post("/training/position/model/delete",{
				gwId: props.positionId,
				jx: obj,
			}).then(()=>{
				fjjxTags.value = fjjxTags.value.filter(t => {  
					return t != obj;
				});
			})
		});
	}

	// 机型新增完成
	const handleModelConfirmed = (data:any) =>{
		request.post("/training/position/model/save",{
			mainid: props.positionId,
			jx: data,
		}).then(()=>{
			loadModel();
		})
	}

</script>
